<template>
  <div id="config-gateway-info">
    <div class="bg-color-fff">
      <p class="title-pad20">网关环境基本信息</p>
      <el-form :model="gwInfoForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-row>
          <el-col :push=2 :span=10>
            <el-form-item label="网关编号:" prop="gwEnvCode">
              <el-input v-model="gwInfoForm.gwEnvCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push=2 :span=10>
            <el-form-item label="网关名称:" prop="gwEnvName">
              <el-input v-model="gwInfoForm.gwEnvName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push=2 :span=10>
            <el-form-item label="网关外部地址:" prop="gwEnvUrl">
              <el-input v-model="gwInfoForm.gwEnvUrl" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push=2 :span=10>
            <el-form-item label="网关部署地址:" prop="gwEnvAddress">
              <el-input v-model="gwInfoForm.gwEnvAddress" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push=2 :span=10>
            <el-form-item label="网关环境描述:" prop="gwEnvDesc">
              <el-input v-model="gwInfoForm.gwEnvDesc" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="mrg-top10 bg-color-fff">
      <div>
        <p class="title-pad20">网关错误信息</p>
        <el-button class="float-right20" type="primary" size="mini" @click="addgwData">新增</el-button>
      </div>
      <el-table :data="gwErrInfoData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="errorCode" label="错误代码"></el-table-column>
        <el-table-column prop="errorMsg" label="错误信息"></el-table-column>
        <el-table-column prop="errorDesc" label="描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="modifyData(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="text" @click="deleteC(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增/修改弹框 -->
      <el-dialog :title="editMode === 'ADD' ? '新建' : '修改'" name="addDialog" :visible="editDialogShow" @close="closeDialog" width="900px">
        <el-form :model="gwErrInfoForm" label-width="100px" :rules="rules" ref="gwErrInfoForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="错误代码" prop="errorCode">
                <el-input v-model="gwErrInfoForm.errorCode"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="错误信息" prop="errorMsg">
                <el-input v-model="gwErrInfoForm.errorMsg"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="描述" prop="errorDesc">
                <el-input v-model="gwErrInfoForm.errorDesc"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template>
          <div class="buttons-div">
            <div class="form-buttons">
              <el-button @click="reset">重置</el-button>
              <el-button @click="closeDialog('addDialog')">关闭</el-button>
              <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import { mapState } from 'vuex'
import api from '../../../../../api/url'
import ajax from '../../../../../api/ajax/ajax'
import Msg from '../../../../../assets/js/msg'
export default {
  data () {
    return {
      gwInfoForm: {},
      gwErrInfoData: [],
      gwErrInfoForm: {},
      modifyErrData: {},
      editMode: 'ADD',
      getErrData: {},
      gwEnvId: '',
      idx: '',
      editDialogShow: false,
      rules: {
        errorCode: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        errorMsg: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        errorDesc: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 新增
    addgwData () {
      this.editMode = 'ADD'
      this.editDialogShow = true
    },
    closeDialog () {
      this.editDialogShow = false
      this.gwErrInfoForm = {}
      this.$refs.gwErrInfoForm.resetFields()
    },
    // 重置
    reset () {
      if (this.editMode === 'ADD') {
        this.gwErrInfoForm = {}
        this.$refs.gwErrInfoForm.clearValidate()
      } else {
        this.$refs.gwErrInfoForm.clearValidate()
        this.gwErrInfoForm = this.modifyErrData
      }
    },
    // 删除
    deleteC (index, data) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ajax.post(api.DELETE_GW_ERR_INFO, {errorId: data.errorId}).then(res => {
          if (res === 'success') {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            ajax.post(api.LIST_GW_LINK_ERR, {gwEnvId: this.gwEnvId}).then(res => {
              this.gwErrInfoData = res.list
            })
          }
        }).catch(err => {
          console.info(err)
        })
      }).catch(() => {
      })
    },
    // 提交后刷新
    refresh (data) {
      ajax.post(api.ADD_MODIFY_ERR_INFO, data, true).then(res => {
        if (res === 'success') {
          if (this.editMode !== 'ADD') {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
          } else {
            this.$message({
              type: 'success',
              message: '新增成功'
            })
          }
          this.editDialogShow = false
          ajax.post(api.LIST_GW_LINK_ERR, {gwEnvId: this.gwEnvId}).then(res => {
            this.gwErrInfoData = res.list
          })
        }
      }).catch(err => {
        console.info(err)
        Msg.alert(err.errorMsg)
      })
    },
    // 提交
    submitForm () {
      this.$refs.gwErrInfoForm.validate(valid => {
        if (valid) {
          if (this.editMode !== 'ADD') {
            this.getErrData.list[this.idx] = this.gwErrInfoForm
            this.gwInfoForm.errorCodeList = this.getErrData
            this.refresh(this.gwInfoForm)
          } else if (this.editMode === 'ADD') {
            // ########################################
            // let a = JSON.parse(JSON.stringify(this.getErrData.list))
            let a = JSON.parse(JSON.stringify(this.gwErrInfoData))
            a.push(this.gwErrInfoForm)
            let b = JSON.parse(JSON.stringify(this.getErrData))
            b.list = JSON.parse(JSON.stringify(a))
            let copyGwInfoForm = JSON.parse(JSON.stringify(this.gwInfoForm))
            copyGwInfoForm.errorCodeList = JSON.parse(JSON.stringify(b))
            this.refresh(copyGwInfoForm)
          } else {
          }
        }
      })
    },
    // 修改
    modifyData (indx, selectData) {
      this.idx = indx
      this.editMode = 'MODIFY'
      this.editDialogShow = true
      this.modifyErrData = JSON.parse(JSON.stringify(selectData))
      this.gwErrInfoForm = JSON.parse(JSON.stringify(selectData))
    }
  },
  mounted () {
    this.$on('getGwErrInfo', ({selectData, id}) => {
      this.gwInfoForm = selectData
      this.gwEnvId = id
      ajax.post(api.LIST_GW_LINK_ERR, {gwEnvId: id}).then(res => {
        this.gwErrInfoData = res.list
        this.getErrData = res
      })
    })
  },
  created () {
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #config-gateway-info
    padding-bottom 10px
    .bg-color-fff
      background #ffffff
      padding-bottom 20px
    .mrg-top10
      margin-top 10px
    .title-pad20
      display inline-block
      height: 40px
      line-height 40px
      padding-left 20px
    .float-right20
      float right
      margin-right 20px
      margin-top 6px
    .buttons-div
      height 40px
      .form-buttons
        float right
    .el-form-item__label
      width 120px
    // .el-form-item\.el\-input
    .el-input
      width 100%
    // .el-col-10
    //   margin-top 10px
    // .el-select > .el-input
    //   width 246px
    // .el-col-12
    //   width: 45%
</style>
